<template>
	<view id="disciple-list">
    <view class="header">
      <view @tap="returnPage">
        <uni-icons
            class="row-right-icon"
            type="arrowleft"
            color="#fff"
            size="18"
        ></uni-icons>
        <span>返回</span>
      </view>
    </view>
		<view class="header-card">
			<view class="card-upper-half">
				<view class="title">您的邀请码({{codeTips}})</view>
				<view class="code">{{noUsedCode}}</view>
				<view class="tips">一个邀请码只能邀请一个用户</view>
				<view class="copy-btn" @click="copyCode">复制</view>
				<view class="card-left-bottom"></view>
				<view class="card-right-bottom"></view>
			</view>
			<view class="card-lower-half">
				<view class="code-list-btn" @click="toInvitationCodeListPage">历史邀请码</view>
				<view class="tips">您的邀请码已生成：{{generatedNum}}/{{codeAllNum}}</view>
				<button class="generate-btn"@click="generateInvitationCode">生成邀请码</button>
				<view class="upgrade-code">
					<!-- <view class="btn" @click="isShowUpgradeModal = true">升级码</view> -->
					<view class="btn" @click="isShowRulesModal = true">邀请人须知</view>
				</view>
				<view class="card-left-top"></view>
				<view class="card-right-top"></view>
			</view>
		</view>
		<view class="page-content">
			<view class="nav-bar">
				<view class="nav-tab" :class="listType=='inactivated' ? 'active':''" @click="changeTab('inactivated')">未激活用户({{unactivatedNum}})</view>
				<view class="nav-tab" :class="listType=='activated' ? 'active':''" @click="changeTab('activated')">已激活用户({{activatedNum}})</view>
			</view>
			<view class="tab-content">
				<view class="inactivated-box" v-show="listType == 'inactivated'">
					<view class="search-box">
						<input type="text" v-model="searchStatusText" class="status-box" disabled="true" placeholder="请选择状态"  @click="showSinglePicker"/>
						<input class="input-box" v-model="phone.inactivated" type="text" placeholder="请输入手机号" />
						<button class="search-btn" @click="getUserList('inactivated')">查询</button>
					</view>
					<view class="list">
						<view class="list-card" v-for="(item,index) in unactivatedList" :key="index">
							<view class="list-card-header">
								<image class="header-img" :src="item.head_img_url" v-if="item.head_img_url" mode=""></image>
								<image class="header-img" src="../../static/img/header_image.png" mode="" v-else></image>
								<view class="phone-name">
									<view class="name">{{item.push_phone}} <view class="copy-btn"  @click="copyPhone(item.push_phone)">复制</view></view>
									<!-- <view class="phone">{{item.push_name}}/{{item.push_id_code}}</view> -->
								</view>
								<view class="status">
									<!-- <view class="check-status" style="color: #666666;" v-if="item.status_name.indexOf('失败')>=0">{{item.status_name}}</view>
									<view class="check-status" v-else>{{item.status_name}}</view> -->
									<view class="remark">{{item.remark}}</view>
								</view>
							</view>

						</view>
						<view class="no-data-tips" v-if="unactivatedList.length == 0">
							<image class="no-data-img" src="../../static/img/no-data-img.png" mode=""></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
				<view class="activated-box" v-show="listType == 'activated'">
					<view class="search-box">
						<input type="text" class="status-box" disabled="true" placeholder="公众号状态" v-model="attentionStatusText" @click="showSinglePicker1" />
						<input type="text" class="order-status-box" disabled="true" placeholder="接单状态"  v-model="ordersStatusText" @click="showSinglePicker2"/>
						<input class="input-box"  type="text" v-model="phone.activated" placeholder="请输入手机号" />
						<button class="search-btn" @click="getUserList('activated')">查询</button>
					</view>
					<view class="list">
						<view class="list-card"  v-for="(item,index) in activatedList" :key="index">
							<view class="list-card-header">
								<image class="header-img" :src="item.head_img_url" v-if="item.head_img_url" mode=""></image>
								<image class="header-img" src="../../static/img/header_image.png" mode="" v-else></image>
								<view class="phone-name">
									<view class="name">{{item.push_phone}}<view class="copy-btn" @click="copyPhone(item.push_phone)">复制</view></view>
									<view class="phone">{{item.push_name}}/{{item.push_id_code}}</view>
								</view>
								<button class="freeze-btn" v-if="item.push_status == 1 || item.push_status == 2" @click="freezeUser(item)">冻结</button>
								<view class="freeze-btn" v-else>{{getUserStatus(item.push_status)}}</view>
							</view>
							<view class="list-card-content">
								<view class="content-cell">
									<view>销量单：{{item.sale_complete_num}}</view>
									<view>流量单：{{item.flow_complete_num}}</view>
								</view>
								<view class="content-cell">
									<view>评价单：{{item.assess_complete_num}}</view>
									<view>公众号：<text class="cell" v-if="item.attention_status ==0">未关注</text><text style="color: #3388ff;" v-else>已关注</text></view>
								</view>
								<view class="content-cell-other">接单状态：<text class="cell" v-if="item.orders_status==2">关闭</text><text style="color: #3388ff;" v-else>开启</text>-最近开启时间:{{item.open_time}}</view>
							</view>
						</view>
						<view class="no-data-tips" v-if="activatedList.length == 0">
							<image class="no-data-img" src="../../static/img/no-data-img.png" mode=""></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<u-modal
			:showModal="isShowUpgradeModal"
			title="推荐徒弟升级师傅"
			@cancleModal = "isShowUpgradeModal = false"
			confrimTitle = '继续'
			@confirmModal="confirmSumbit"
			>
			<view>
				购买的升级码只能用于徒弟升级成师傅，升级码{{money}}({{merchantMoneyText}})/个，不能重复使用，费用将从本金扣除，没有本金的师傅不能购买升级码。购买后无法退款。
				<view style="color: #FF5001;">
					注：将升级码发放给徒弟前，请确认已向徒弟收取升级码费用！
				</view>
			</view>
		</u-modal>
		<u-modal
			:showModal="isShowRulesModal"
			title="邀请人须知"
			@cancleModal = "isShowRulesModal = false"
			confrimTitle = '复制'
			@confirmModal="copyRules"
			>
			<view>
				<view v-html="ruleDeploy.register_content"></view>
			</view>
		</u-modal>
		<mpvue-picker themeColor="#FF5001" ref="mpvuePicker" mode="selector" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-picker themeColor="#FF5001" ref="mpvuePicker1" mode="selector" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		@onConfirm="confirmGzh" @onCancel="onCancel" :pickerValueArray="attentionPickerValueArray"></mpvue-picker>
		<mpvue-picker themeColor="#FF5001" ref="mpvuePicker2" mode="selector" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		@onConfirm="confirmOrderStatus" @onCancel="onCancel" :pickerValueArray="orderPickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import {
		apiPushUserCodeStatusList,
		apiMasterFreeze,
		apiPushCreateCode,
		apiModelInfo
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	import uModal from '../../components/uni-modal/uni-modal.vue'
	import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
	export default {
		computed: {
			...mapState(['token'])
		},
		components: { mpvuePicker,uModal},
		data(){
			return {
				isShowUpgradeModal: false,
				isShowRulesModal: false,
				unactivatedList:[],
				activatedList:[],
				noUsedCode:'',
				generatedNum:0,
				codeAllNum:0,
				codeTips:'未生成',
				unactivatedNum:0,
				activatedNum:0,
				listType:'activated',
				status: 1,
				userStatus: {
					1: '正常',
					2: '监控',
					3: '冻结',
					4: '禁用',
					5: '待审核'
				},
				isShowModal: false,
				modalType: 'rules',
				money:'100',
				page:{
					activated: 1,
					inactivated:1,
				},
				pageSize: {
					activated: 1000,
					inactivated:1000,
				},

				codeType: {
					activated: 2,
					inactivated:1,
				},
				pickerValueDefault: [0],
				deepLength: 1,
				pickerValueArray:[{
					label: '全部',
					value: ''
				},{
					label: '待填写订单',
					value: 1
				},{
					label: '待同步订单',
					value: 2
				},{
					label: '待安全员审核',
					value: 3
				},{
					label: '安全员审核成功',
					value: 4
				},{
					label: '安全员审核失败',
					value: 5
				},{
					label: '自动审核失败',
					value: 6
				}],
				inactivatedStatusJson: {
					1: '待填写订单',
					2: '待同步订单',
					3: '待安全员审核',
					4: '安全员审核成功',
					5: '安全员审核失败',
					6: '自动审核失败',
				},
				phone: {
					activated: '',
					inactivated: '',
				},
				searchStatus: '',
				searchStatusText: '',
				attentionPickerValueArray:[{
					label: '全部',
					value: ''
				},{
					label: '未关注',
					value: 2
				},{
					label: '已关注',
					value: 1
				}],
				orderPickerValueArray:[{
					label: '全部',
					value: ''
				},{
					label: '开启',
					value: 1
				},{
					label: '关闭',
					value: 2
				}],
				ordersStatus: '',
				attentionStatus: '',
				ordersStatusText: '',
				attentionStatusText: '',
				ruleDeploy: {},
				merchantMoneyText: uni.getStorageSync('merchantMoneyText')
			}
		},
		onShow() {
			this.getUserList('inactivated')
			this.getUserList('activated')
			apiModelInfo({}).then(res =>{
			    if(res.data.code == 1)  {
					this.ruleDeploy = res.data.msg
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		onLoad() {

		},
		methods:{
      returnPage() {
        // 跳转上一级
        // 这个判断用来解决这种情况，当用户没有上一条路由的历史记录，出现点击返回按钮没有反应时，下面的代码用来判断有没有上一条路由的历史记录   如果没有则返回首页
        // if (window.history.length <= 1) {
        this.$router.push({ path: "../profile/a" });
        // return false;
        // } else {
        //   this.$router.go(-1);
        // }
      },
			getUserList(type){
				apiPushUserCodeStatusList({
					token:this.token,
					codeType: this.codeType[type],
					phone: this.phone[type],
					status: type == 'inactivated' ? this.searchStatus : '',
					ordersStatus: type == 'activated' ? this.ordersStatus : '',
					attentionStatus: type == 'activated' ? this.attentionStatus : '',
				}).then(res =>{
				    if(res.data.code == 1)  {
						if (type == 'inactivated') {
							this.unactivatedNum = res.data.msg.code_num ? res.data.msg.code_num : 0
							this.unactivatedList = []
							Object.values(res.data.msg.list).forEach((item, index) => {
								this.unactivatedList.push(item)
							})
						} else{
							this.activatedList = []
							Object.values(res.data.msg.list).forEach((item, index) => {
								this.activatedList.push(item)
							})
							this.activatedNum = res.data.msg.code_num ? res.data.msg.code_num : 0
						}
						this.noUsedCode = res.data.msg.no_used_code
						this.codeTips = this.noUsedCode ? '未使用' : '未生成'
						this.generatedNum = res.data.msg.all_num == '' ? 0 : res.data.msg.all_num
						this.money = res.data.msg.upgrade_money
						this.codeAllNum = res.data.msg.invite_num == '' ? 0 : res.data.msg.invite_num
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			showSinglePicker() {
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			},
			showSinglePicker1() {
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker1.show()
			},
			showSinglePicker2() {
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker2.show()
			},
			onConfirm(e){
				this.searchStatus = e.value[0]
				this.searchStatusText = e.label
			},
			confirmGzh(e){
				this.attentionStatus = e.value[0]
				this.attentionStatusText = e.label
			},
			confirmOrderStatus(e){
				this.ordersStatus = e.value[0]
				this.ordersStatusText = e.label
			},
			copyRules(){
				var text = this.ruleDeploy.register_content.replace(/<[^>]+>/g,"");
				uni.setClipboardData({
					data: text,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
			changeTab(type){
				this.listType = type
			},
			copyPhone(phone){
				uni.setClipboardData({
					data: phone,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
			copyCode(){
				if(!this.noUsedCode){
					this.$msg.showToast('请先生成邀请码')
					return
				}
				uni.setClipboardData({
					data: this.GLOBAL.MAIN_URL + 'pages/reg/reg' + '?inviteCode='+ this.noUsedCode,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
			confirmSumbit(){
				uni.navigateTo({
				    url: './masterList',
				});
				this.isShowUpgradeModal = false
			},
			getUserStatus (data) {
				return this.userStatus[data]
			},
			freezeUser(item){
				var name = item.push_name ? item.push_name : '该用户'
				uni.showModal({
					content: '是否冻结' + name + '?冻结后无法解冻',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							apiMasterFreeze({
								token: this.token,
								pushId: item.push_id
							}).then(res =>{
							    if(res.data.code == 1)  {
									this.$msg.showToast('冻结成功')
									this.getUserList(this.listType)
								} else {
									this.$msg.showToast(res.data.msg)
								}
							}).catch(res => {
								this.$msg.showToast(res.data.msg)
							})

						}
					}
				});
			},
			toInvitationCodeListPage(){
				uni.navigateTo({
					url: './invitationCodeList'
				})
			},
			generateInvitationCode(){
				uni.showLoading({
					title: '生成中',
					mask: true
				})
				apiPushCreateCode({
					token: this.token
				}).then(res =>{
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.$msg.showToast('生成成功')
						this.codeTips = '未使用'
						this.noUsedCode = res.data.msg
						this.getUserList(this.listType)
					} else if (res.data.code == 2003) {
						this.$msg.showToast('邀请码数量已达到上限')
						return
					} else {
						this.codeTips = ''
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	#disciple-list {
		.header-card {
			 margin: 32upx;
			.card-upper-half {
				background: #FFFFFF;
				text-align: center;
				padding: 48upx 0 24upx 0;
				position: relative;
				.title {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 36upx;
				}
				.code {
					width: 440upx;
					height: 104upx;
					background: #F2F2F4;
					font-size: 44upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 104upx;
					margin: 24upx auto;
				}
				.tips {
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #666666;
					line-height: 34upx;
				}
				.copy-btn {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: $theme-color;
					line-height: 36upx;
					text-decoration: underline;
					margin-top: 10upx;
					padding: 20upx 0;
				}
				.card-left-bottom,.card-right-bottom {
					position: absolute;
					width: 20upx;
					height: 20upx;
					border: 1px solid #F5F5F5;
					z-index: 1;
					background: #f5f5f5;
				}
				.card-left-bottom {
					left: -1px;
					bottom: -1px;
					border-radius:0px 20upx 0px 0px;
					border-top: 1px solid #F5F5F5;
					border-right: 1px solid #F5F5F5;
				}
				.card-right-bottom {
					right: -1px;
					bottom: -1px;
					border-radius: 20upx 0px 0px 0px;
					border-top: 1px solid #F5F5F5;
					border-left: 1px solid #F5F5F5;
				}
			}
			.card-lower-half {
				background: #FFFFFF;
				text-align: center;
				padding: 24upx 0 48upx 0;
				position: relative;
				.code-list-btn {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: $theme-color;
					line-height: 36upx;
					text-decoration: underline;
					padding: 20upx 0;
				}
				.tips{
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #666666;
					line-height: 34upx;
				}
				.generate-btn {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 96upx;
					height: 96upx;
					background: $theme-background-color;
					border-radius: 5px;
					margin: 32upx 32upx 0 32upx;
				}
				.upgrade-code{
					display: flex;
					align-items: center;
					justify-content:space-between;
					.btn{
						font-size: 26upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: $theme-color;
						line-height: 36upx;
						text-decoration: underline;
						padding: 20upx 0;
						margin: 0 32upx;
					}
				}
				.card-left-top,.card-right-top {
					position: absolute;
					width: 20upx;
					height: 20upx;
					border: 1px solid #F5F5F5;
					z-index: 1;
					background: #f5f5f5;
				}
				.card-left-top {
					left: -1px;
					top: -1px;
					border-radius:0px 0px 20upx 0px;
					border-top: 1px solid #F5F5F5;
					border-right: 1px solid #F5F5F5;
				}
				.card-right-top {
					right: -1px;
					top: -1px;
					border-radius:0px 0px 0px 20upx;
					border-top: 1px solid #F5F5F5;
					border-right: 1px solid #F5F5F5;
				}
			}
		}
		.page-content {
			.nav-bar {
				text-align: center;
				.nav-tab {
					width: 240upx;
					height: 64upx;
					background: #E9E9E9;
					font-size: 28upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
					line-height: 64upx;
					display: inline-block;
					&:nth-child(1){
						border-radius: 10upx 0px 0px 10upx;
					}
					&:nth-child(2){
						border-radius: 0px 10upx 10upx 0px;
					}
					&.active{
						background: #FFFFFF;
						color: #333333;
					}
				}
			}
			.tab-content {
				.inactivated-box {
					.search-box {
						display: flex;
						font-family: PingFang-SC-Medium, PingFang-SC;
						height: 60upx;
						padding: 32upx;
						.status-box{
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							width: 220upx;
							margin-right: 20upx;
							height: 60upx;
							font-size: 28upx;
							padding-left: 20upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.input-box {
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							flex: 2;
							height: 60upx;
							margin-right: 20upx;
							font-size: 28upx;
							padding-left: 20upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.search-btn {
							height: 60upx;
							color: #FFFFFF;
							background: $theme-background-color;
							font-size: 26upx;
							width: 120upx;
							line-height: 60upx;
						}
					}
				}
				.activated-box {
					.search-box {
						display: flex;
						font-family: PingFang-SC-Medium, PingFang-SC;
						height: 60upx;
						padding: 32upx;
						.status-box{
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							width: 140upx;
							margin-right: 20upx;
							height: 60upx;
							font-size: 24upx;
							padding-left: 10upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.order-status-box {
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							width: 120upx;
							margin-right: 20upx;
							height: 60upx;
							font-size: 24upx;
							padding-left: 10upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.input-box {
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							flex: 2;
							height: 60upx;
							margin-right: 20upx;
							font-size: 24upx;
							padding-left: 10upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.search-btn {
							height: 60upx;
							color: #FFFFFF;
							background: $theme-background-color;
							font-size: 26upx;
							width: 100upx;
							line-height: 60upx;
							padding: 0 10upx;
						}
					}

				}
				.list {
					.list-card {
						margin: 0 32upx 32upx 32upx;
						border-radius: 24upx;
						background: #FFFFFF;
						.list-card-header {
							display: flex;
							align-items: center;
							position: relative;

							.header-img {
								margin: 50upx 16upx 32upx 32upx;
								width: 104upx;
								height: 104upx;
								border-radius: 50%;
							}
							.phone-name {
								margin-top: 20upx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;
								height: 104upx;
								box-sizing: border-box;
								flex: 1;
								.name {
									font-size: 28upx;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 400;
									color: #333333;
									line-height: 40upx;
								}
								.copy-btn {
									display: inline-block;
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									color: #FF5001;
									line-height: 36upx;
									margin-left: 10upx;
								}
								.phone {
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									color: #333333;
									line-height: 28upx;
								}
							}
							.freeze-btn {
								border-radius: 30upx;
								border: 1px solid $theme-color;
								font-size: 26upx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 500;
								color: $theme-color;
								line-height: 36upx;
								padding: 6upx 32upx;
								margin-right: 32upx;
							}
							.status {
								margin-right: 32upx;
								margin-top: 20upx;
								.check-status {
									border-radius: 30upx;
									border: 1px solid $theme-color;
									color: $theme-color;
									padding: 6upx 18upx;
									font-size: 26upx;
								}
								.remark {
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									font-weight: 500;
									color: #333333;
									line-height: 40upx;
									text-align: right;

								}
							}
						}
						.list-card-content {
							.content-cell-other {
								color: #333333;
								line-height: 40upx;
								padding: 10upx 32upx;
								font-size: 28upx;
								.cell {
									color: $theme-color;
								}

							}
							.content-cell{
								display: flex;
								justify-content:space-between;
								align-items: center;
								font-size: 28upx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								color: #333333;
								line-height: 40upx;
								padding: 10upx 32upx;
								.cell {
									color: $theme-color;
								}
							}
						}
					}
				}
			}
		}
		.no-data-tips {
			text-align: center;
			font-size: 28upx;
			font-weight: 400;
			color: #999999;
			line-height: 28upx;
			.no-data-img {
				width: 300upx;
				height: 300upx;
				margin-top: 30upx;
				margin-bottom: 20upx;
			}
		}
	}
  .header {
    width: 100vw;
    height: 75upx;
    box-sizing: border-box;
    padding: 10upx 20upx;
    color: #fff;
    font-size: 28upx;
    display: flex;
    align-items: center;
    letter-spacing: 6upx;
    background: $theme-background-color;
    .row-right-icon {
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
    }
  }
</style>
